<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="" id="username">
    <input type="text" name="" id="age">
    <button>按钮</button>
    <script>
        // post 请求必须设置请求参数类型
        let username = document.querySelector('#username');
        let age = document.querySelector('#age');
        let button = document.querySelector('button');
        button.onclick = function () {
            // 合并参数
            let params = {
                username:username.value,
                age:age.value
            }
            // 创建ajax对象
            let xhr = new XMLHttpRequest()
            // ajax对象以什么方式对哪里发送请求
            xhr.open('post', 'http://127.0.0.1:8080')
            // 设置请求参数类型,application/json会产生预检请求
            xhr.setRequestHeader('Content-Type','application/json')
            // 参数必须在send函数中发出
            xhr.send(JSON.stringify(params))
            // 当客户端接受服务端的响应数据后,会触发onload事件
            xhr.onload = function () {
                console.log('成功接受到服务端请求')
                // 输出服务端返回的响应体
                console.log(xhr.responseText)
            }
        }
    </script>
</body>
</html>